<template>
    <view class="container">
     <view class="list" v-if="signList.length > 0">
        <view class="item-wrapper" v-for="(item, index) in signList" :key="index">
           <view class='month'>{{item.month}}</view>
           <view class="item"  v-for="(child,index) in item.list" :key="index">
               <view class="left">
                 <view class="top">
                   <view class="title">{{$t(child.title)}}</view>
                 </view>
                 <view class="date">{{child.add_time}}</view>
               </view>
               <view class="score-num">+{{child.number}}</view>
           </view>
       </view>
     </view>
     <view class='loadingicon acea-row row-center-wrapper' v-if="signList.length > 0">
         <text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadtitle}}
     </view>
     <view class="no-data-box" v-if="signList.length == 0">
       <image src="../static/no_coupon.png" class="no-data-img" />
       <view class="text">暂无积分明细</view>
     </view>
    </view>
</template>

<script>
import { getSignMonthList } from '@/api/user.js';
import { toLogin } from '@/libs/login.js';
import { mapGetters } from "vuex";
    
export default {
  data() {
    return {
        loading:false,
        loadend:false,
        loadtitle:this.$t(`加载更多`),
        page:1,
        limit:8,
        signList:[],
    }
  },
  computed: mapGetters(['isLogin']),
  watch:{
  	isLogin:{
  		handler:function(newV,oldV){
  			if(newV){
  				this.getSignMoneList();
  			}
  		},
  		deep:true
  	}
  },
  onLoad(){
  	if(this.isLogin){
  		this.getSignMoneList();
  	}else{
  		toLogin();
  	}
  },
  onReachBottom: function () {
      this.getSignMoneList();
    },
  methods: {
    /**
       * 获取签到记录列表
      */
      getSignMoneList:function(){
        let that=this;
        if(that.loading) return;
        if(that.loadend) return;
        that.loading = true;
        that.loadtitle = "";
        getSignMonthList({ page: that.page, limit: that.limit }).then(res=>{
          let list = res.data;
          let loadend = list.length < that.limit;
          that.signList = that.$util.SplitArray(list, that.signList);
          that.$set(that,'signList',that.signList);
          console.log('that.signList', that.signList)
          that.loadend = loadend;
          that.loading = false;
          that.loadtitle = loadend ? that.$t(`我也是有底线的`) : that.$t(`加载更多`);
            }).catch(err=>{
          that.loading = false;
          that.loadtitle = that.$t(`加载更多`);
        });
      }
  }
}
</script>

<style lang="scss" scoped>
    .container{
      min-height: 100vh;
      background: #F8F9FC;
      text-align: center;
      .list{
         margin: 0 auto;
         .item-wrapper{
           .month{
               font-weight: 500;
               font-size: 32rpx;
               color: #191919;
               text-align: left;
               width: 690rpx;
               margin: 20rpx auto 20rpx;
           }
         }
        .item{
          display: flex;
          width: 690rpx;
          padding: 30rpx;
          margin: 0 auto 20rpx;
          background: #FFFFFF;
          border-radius: 20rpx 20rpx 20rpx 20rpx;
          .score-num{
           font-weight: 500;
           font-size: 28rpx;
           color: #FF5700;
          }
          .left{
            margin-left: 30rpx;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            text-align: left;
            .top{
              
            }
            .title{
              margin-bottom: 10rpx;
              font-weight: 500;
              font-size: 32rpx;
              color: #191919;
              white-space: nowrap; /* 禁止文本换行 */
              overflow: hidden; /* 隐藏超出范围的内容 */
              text-overflow: ellipsis; /* 使用省略号 */
              width: 510rpx;
              margin-right: 30rpx;
            }
            .score{
              font-size: 26rpx;
              color: #666666;
            }
            .date{
              font-size: 24rpx;
              color: #B9B9BD;
            }
          }
        }
      }
    }
    .no-data-box{
      .no-data-img{
        width: 360rpx;
        height: 360rpx;
        display: block;
        margin: 100rpx auto 10rpx;
      }
      .text{
        text-align: center;
        font-size: 26rpx;
        color: #B9B9BD;
      }
    }
</style>